<template>
	<nav-bar
		v-if="showNavBar"
		:title="metaTitle"
		:left-text="leftText"
		:left-arrow="showLeftArrow"
		@click-left="onClickLeft"
	></nav-bar>
	<div
		:class="{
			'content-container': !showNavBar && !showTabBar && !fixedCustom,
			'custom-container': fixedCustom,
			'content-container-with': (showNavBar || showTabBar) && !fixedCustom,
			'with-tab': showTabBar && !showNavBar,
			'with-nav': !showTabBar && showNavBar,
			'with-tab-nav': showNavBar && showTabBar,
			'tab-wx': getBrowser().isWeChat,
			'support-safe-area': !showNavBar && !showTabBar && !fixedCustom && !getBrowser().isApp,
		}"
	>
		<router-view v-slot="{ Component }">
			<keep-alive v-if="isKeepAlive">
				<component :is="Component" />
			</keep-alive>
			<component :is="Component" v-if="!isKeepAlive" />
		</router-view>
	</div>
	<footer-bar v-if="showTabBar"></footer-bar>
</template>

<script lang="ts" setup>
import { watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useStore } from 'vuex';
import { setOverFlow, getEl, getBrowser } from '@/utils/methods/common';
import { NOT_BACK_ROUTE } from '@/router/config';
import { isBoolean, isAppOrWx } from '@/utils/validate';
import { setStorage } from '@/utils/methods/storage';
import FooterBar from '@/layout/FooterBar.vue';
import NavBar from '@/layout/NavBar.vue';

const store = useStore();
const route = useRoute();
const router = useRouter();
ref: showNavBar = store.getters['app/fixedNavBar'];
ref: showTabBar = store.getters['app/fixedTabBar'];
ref: fixedCustom = false;
ref: metaTitle = '';
ref: leftText = '';
ref: showLeftArrow = false;
ref: isKeepAlive = route.meta.keepAlive;

// 存储第一次进入页面的地址，用于ios微信分享url
setStorage('firstHref', location.href);

/* navbar左侧返回按钮及文字 */
const handleBackBtn = (routeName: string): void => {
	if (!NOT_BACK_ROUTE.includes(routeName)) {
		leftText = '返回';
		showLeftArrow = true;
	} else {
		leftText = '';
		showLeftArrow = false;
	}
};

/* navbar左侧返回按钮点击 */
const onClickLeft = () => {
	router.go(-1);
};

/* 监听路由 navbar标题赋值处理 + navbar返回处理 + navBar路由级处理 + tabBar路由级处理 */
const renderLayout = (meta: any, name) => {
	metaTitle = meta.title;
	handleBackBtn(name as string);
	isKeepAlive = meta.keepAlive;
	showNavBar = isAppOrWx
		? false
		: isBoolean(meta.fixedNavBar)
		? meta.fixedNavBar
		: store.getters['app/fixedNavBar'];
	showTabBar = isBoolean(meta.fixedTabBar) ? meta.fixedTabBar : store.getters['app/fixedTabBar'];
	fixedCustom = meta.fixedCustom;

	/* 兼容浏览器滚动显示 */
	const elTemp = [getEl('body'), getEl('html'), getEl('#app')];
	if (elTemp[0] && elTemp[1] && elTemp[2]) {
		if (!showNavBar && !showTabBar && !fixedCustom) {
			elTemp.forEach((item) => {
				setOverFlow(item);
			});
		} else {
			elTemp.forEach((item) => {
				setOverFlow(item, 'add');
			});
		}
	}
};

/* 监听路由 navbar标题赋值处理 + navbar返回处理 + navBar路由级处理 + tabBar路由级处理 */
watch([() => route.meta, () => route.name], ([meta, name]) => {
	renderLayout(meta, name);
});
</script>
